<template>
  <div class="the-title-box">
    <div
      class="title-content-box"
      v-for="(item, index) in dataList"
      :key="index"
    >
      <div
        :style="{ backgroundImage: 'url(' + item.image + ')' }"
        class="title-content-bg"
      ></div>
      <div class="shu-box"></div>
      <div class="content-text">
        <span>{{ item.name }}</span>
        <span>{{ item.value }}</span>
      </div>
      <div class="title-content-hover" v-if="index === 0">
        <div
          v-for="(item, i) in pondList"
          :key="i"
          @click="$emit('input', item.tailingPondId)"
          :class="{ active: value === item.tailingPondId }"
        >
          {{ item.tailingName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { FetchGetTailingAndWarningCount, FetchGetTailingLocation } from "@/api";
export default {
  name: "TheTotal",

  data() {
    return {
      dataList: [],
      pondList: [],
      // dataList: [
      //     {
      //         image: require("@/asset/image/the-title-one.png"),
      //         name: "尾矿库总数",
      //         value: 5,
      //     },
      //     {
      //         image: require("@/asset/image/the-title-two.png"),
      //         name: "当日预警",
      //         value: 5,
      //     },
      //     {
      //         image: require("@/asset/image/the-title-three.png"),
      //         name: "总预警数",
      //         value: 200,
      //     },
      // ],
    };
  },
  props: {
    value: {
      type: Number,
    },
  },

  created() {
    this.refreshList();
  },

  methods: {
    refreshList() {
      FetchGetTailingAndWarningCount().then((res) => {
        this.dataList = [
          {
            image: require("@/asset/image/the-title-one.png"),
            name: "尾矿库总数",
            value: res.tailingCount,
          },
          {
            image: require("@/asset/image/the-title-two.png"),
            name: "今日预警数",
            value: res.todayWaringNumber,
          },
          {
            image: require("@/asset/image/the-title-three.png"),
            name: "预警总数",
            value: res.waringCount,
          },
        ];
      });
      FetchGetTailingLocation().then((res) => {
        this.pondList = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.the-title-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title-content-box:hover {
    cursor: pointer;
    .title-content-hover {
      display: block;
    }
  }
  .title-content-hover {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background: rgba(5, 15, 31, 0.5);
    color: #fff;
    line-height: 28px;
    text-indent: 1em;
    border-radius: 6px;
    padding: 5px 0;
    display: none;
    & > div {
      &:hover,
      &.active {
        // background: rgba(5,15,31,1);
        color: #00ffff;
      }
    }
  }
  .title-content-box {
    position: relative;
    width: 145px;
    height: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    .title-content-bg {
      width: 46px;
      height: 44px;
      background: no-repeat center center/100% 100%;
    }
    .shu-box {
      width: 2px;
      height: 44px;
      margin: 0 5px;
      background: rgba(255, 255, 255, 0.6);
    }
    .content-text {
      width: 88px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      :first-child {
        color: #fff;
        font-size: 15px;
      }
      :last-child {
        font-size: 25px;
        color: #00f6ff;
      }
    }
  }
}
</style>
